<template>
   <!-- 歌曲搜索展示区 -->

  <div class="searchSong">
    <!-- 搜索区 -->
    <div class="search">
      <input type="text" class="search_input" />
    </div>

      <!-- 搜索结果展示区 -->
    <div class="m_search">
      <div class="snote">
        <span v-show="!selsectList_isShow">{{ keyword }}</span>
      </div>

        <!-- 功能区 -->
      <ul class="m_tabs">
        <li
          v-for="(el, index) of Function_options"
          :key="index"
          @click="click_select(index, el.selectNumber)"
        >
          <a
            href="javascript:;"
            :class="el.selectNumber == $route.query.type ? 'select_bg' : ''"
          >
            <span :class="el.selectNumber == $route.query.type ? 'select_bg1' : ''">{{
              el.type
            }}</span>
          </a>
        </li>
      </ul>

      <!-- 加载区 -->
      <div class="loading" v-show="selsectList_isShow ">
        <img
          src="../images/5-121204193Q9-50.gif"
          alt=""
          class="loadiing_logo"
        />加载中...
      </div>

       <div v-show="!selsectList_isShow">
      <!-- 单曲展示页面 -->
      <div class="ztag">
        <ul v-show="1 == $route.query.type">
          <li
            class="searchSonglist"
            v-for="(el, index) in music"
            :key="el.id"
            @mouseenter="enter(index)"
            @mouseleave="leave"
          >
            <div class="td">
              <div class="hd">
                <a href="javascript:;" class="ply" @click="playSong(index)"></a>
              
              </div>
            </div>
            <div class="td">
              <div class="text">
              
                <router-link :to="{
                  path:'/song',
                  query:{
                    id:el.id,
                   
                  }
                }">{{ el.name }}</router-link>
              </div>
            </div>
            <div class="td icons">
              <div v-show="index == isShow">
                <i class="icn-dl" title="下载"></i>
                <i class="icn-share" title="分享"></i>
                <i class="icn-del" title="删除"></i>
                <i class="icn-add" title="收藏"></i>
              </div>
            </div>
            <div class="td">
              <span class="singerName">
                {{ el.ar[0].name }}
              </span>
            </div>
            <div class="td">
              <div>
                <a href="javascrpit:;" class="album">{{ el.al.name }}</a>
              </div>
            </div>
            <div class="td">
              <div class="songTile">
                {{ el.dt | formatTime }}
              </div>
            </div>
          </li>
        </ul>
      </div>
      <!--歌手展示页面  -->
      <div class="ztag">
        <ul class="Singer_area_ul clearfix" v-show="100 == $route.query.type">
            <li v-for="el in Singer_data" :key="el.id">
            <div class="Singet_picture">
              <a href="javascript:;">
                <img
                  :src="el.img1v1Url"
                  alt=""
                  class="Singet_img" /><span></span
              ></a>
            </div>
            <p>
              <a href="javascript:;" class="nm"
                ><span class="SingetName">{{ el.name }}</span></a
              >
              <a href="javascript:;" class="SingePage"></a>
            </p>
          </li>
        </ul>
      </div>
      <!-- 专辑展示区 -->
         <div class="ztag" v-if="10 == $route.query.type">
              <ul class="album_box clearfix">
                 <li v-for="(el,index) in album_data" :key="el.id">
                    <div class="u-cover" :title="el.name" @mouseenter="album_enter(index)" @mouseleave="album_leave">
                      <a href="javascript:;">
                        <img :src="el.picUrl + '?param=180y180'" alt="">
                        <span class="msk"></span>
                      </a>
                      <a href="javascript:;" class="icon_play" v-show="index == album_flag">

                      </a>
                    </div>
                    <p class="dec"><a href="javascript:;" class="tit">{{el.name}}</a></p>
                    <p class="s-name"><span :title="el.artist.name" class="f-thide"><a href="javascript:;">{{el.artist.name}}</a></span></p>
                 </li>
              </ul>
         </div>
      </div>
    </div>
    
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "MusicBodySearch",
  data() {
    return {
      isShow: "",
      // 搜索的数据
      // 单曲
      music: "",
      // 歌手
      Singer_data: [],
      keyword: "",
      searchKey: "",
      Function_options: [
        { type: "单曲", selectNumber: "1" },
        { type: "歌手", selectNumber: "100" },
        { type: "专辑", selectNumber: "10" },
        { type: "视频", selectNumber: "1014" },
        { type: "歌词", selectNumber: "1006" },
        { type: "歌单", selectNumber: "1000" },
        { type: "声音主播", selectNumber: "1009" },
        { type: "用户", selectNumber: "1005" },
      ],
      selsectList_isShow: false,
      selech_style: 0,
      

      search_type: "1",
      flag:true,
      album_data:'',
      album_flag:-1,
    };
  },
  methods: {
    // 鼠标经过歌曲栏中的功能区显示出来
    enter(el) {
      this.isShow = el;
    },
    // 鼠标经过歌曲栏中的功能区隐藏
    leave() {
      this.isShow = 21;
    },
    //点击播放
    playSong(index) {
      this.$bus.$emit("musicList", this.music[index]);
    },
    click_select(index, type) {
    
      console.log(index);
       this.$router.push({
         path:'/search',
         query:{
           s:this.$route.query.s,
           type
         }
       })

     
      
    },
    album_enter(index){
          this.album_flag = index
    },
    album_leave(){
           this.album_flag = -1
    },
    
  },
  mounted() {
      this.selsectList_isShow = true;
        axios.get('http://localhost:8080/api/cloudsearch' + '?' + Date.now(),{
          params:{
            keywords:this.$route.query.s,
            type:this.$route.query.type,
            limit:'20'
          }
        }).then( (response) => {
          
            this.selsectList_isShow = false;
            this.$nextTick( () => {
                    switch (this.$route.query.type) {
                      case '1':
                        this.music = response.data.result.songs;
                        this.keyword = '搜索"' + this.$route.query.s + '",找到"' + response.data.result.songs.length + '"首单曲';
                        break;
                       case '100':
                        
                        this.Singer_data = response.data.result.artists;
                        this.keyword = '搜索"' + this.$route.query.s + '",找到"' + response.data.result.artists.length + '"个歌手';
                       
                        break;
                       case '10':
                        
                        this.album_data = response.data.result.albums;
                        this.keyword = '搜索"' + this.$route.query.s + '",找到"' + response.data.result.albums.length + '"张专辑';
                       
                        break;  
                      default:
                        break;
                    }


            })
       

        })
  },


  watch: {
     $route(){
        this.selsectList_isShow = true;
        axios.get('http://localhost:8080/api/cloudsearch' + '?' + Date.now(),{
          params:{
            keywords:this.$route.query.s,
            type:this.$route.query.type,
            limit:'20'
          }
        }).then( (response) => {
          
            this.selsectList_isShow = false;
            this.$nextTick( () => {
                    switch (this.$route.query.type) {
                      case '1':
                        this.music = response.data.result.songs;
                        this.keyword = '搜索"' + this.$route.query.s + '",找到"' + response.data.result.songs.length + '"首单曲';
                        break;
                       case '100':
                        
                        this.Singer_data = response.data.result.artists;
                        this.keyword = '搜索"' + this.$route.query.s + '",找到"' + response.data.result.artists.length + '"个歌手';
                       
                        break;
                       case '10':
                        
                        this.album_data = response.data.result.albums;
                        this.keyword = '搜索"' + this.$route.query.s + '",找到"' + response.data.result.albums.length + '"张专辑';
                       
                        break;  
                      default:
                        break;
                    }


            })
       

        })
     },

  },
};
</script>

<style scoped>
.searchSong {
  position: relative;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 40px;
  width: 980px;
  min-height: 700px;
  background-color: #fff;
}
.search {
  width: 420px;
  height: 40px;
  margin: 0 auto;
  background: url(../images/sprite.png) no-repeat 0 0;
}
.search_input {
  float: left;
  width: 320px;
  height: 17px;
  margin: 12px 0 0 20px;
  background-color: #fff;
  border: none;
}
.snote {
  margin: 28px 0 17px;
  text-align: left;
  height: 16px;
}

.m_tabs {
  height: 39px;
  
  background: url(../images/tab.png) repeat-x 0 0;
  border: 1px solid #ccc;
  border-width: 0 1px;
}
.m_tabs li {
  position: relative;
  left: -1px;
  float: left;

  height: 39px;
}
.m_tabs li:first-child:hover {
  background: url(../images/tab.png) no-repeat 0 -45px;
}

.m_tabs li:hover {
  background: url(../images/tab.png) no-repeat -1px -45px;
}
.m_tabs a {
  float: left;
  padding-left: 2px;
}
.m_tabs span {
  float: left;
  width: 108px;
  padding: 2px 2px 0 0;
  line-height: 37px;
  text-align: center;
  cursor: pointer;
}
.select_bg1 {
  background: url(../images/tab.png) no-repeat right -90px;
}
.select_bg {
  background: url(../images/tab.png) no-repeat left -90px;
}

.z-slt {
  display: inline-block;
  width: 108px;
  height: 37px;
  padding: 2px 2px 0 0;
  line-height: 37px;

  cursor: pointer;
}
.ztag {
  margin: 20px 0 0 0;
  width: 900px;
}
.searchSonglist {
  padding: 10px 10px 8px 18px;
  box-sizing: border-box;
  height: 43px;
  border: 1px solid #fff;
  background: #f7f7f7;
}
.td {
  float: left;
  margin-right: 5px;
}
.hd {
  width: 17px;
  height: 17px;
}
.ply {
  display: inline-block;
  width: 17px;
  height: 17px;
  margin: 0 15px 0 0;
  background: url(../images/table.png) no-repeat 0 -103px;
}
.ply:hover {
  background: url(../images/table.png) no-repeat 0 -128px;
}
.text {
  text-align: left;
  width: 370px;
  height: 20px;
}
.icons {
  margin: 0 5px 0 0;

  width: 98px;
  padding-left: 10px;
  height: 28px;
  line-height: 28px;
  overflow: hidden;
}

.icn-del {
  float: right;
  margin: 0 7px 0 0;
  width: 18px;
  height: 16px;
  background: url(../images/table.png) no-repeat 0px -174px;
  cursor: pointer;
}
.icn-del:hover {
  background: url(../images/table.png) no-repeat -20px -174px;
}

.icn-dl {
  float: right;
  margin: 0 7px 0 0;
  width: 18px;
  height: 16px;
  background: url(../images/table.png) no-repeat -81px -174px;
  cursor: pointer;
}
.icn-dl:hover {
  background: url(../images/table.png) no-repeat -104px -174px;
}
.icn-share {
  float: right;
  margin: 0 7px 0 0;
  width: 18px;
  height: 16px;
  background: url(../images/table.png) no-repeat 0 -195px;
  cursor: pointer;
}
.icn-share:hover {
  background: url(../images/table.png) no-repeat -20px -195px;
}

.icn-add {
  float: right;
  margin: 0 5px 0 0;
  width: 16px;
  height: 16px;
  background: url(../images/icon.png) no-repeat 0px -700px;
  cursor: pointer;
}
.icn-add:hover {
  background: url(../images/icon.png) no-repeat -22px -700px;
}
.singerName {
  display: inline-block;
  margin: 0 12px 0 0;
  width: 130px;
  height: 16px;
  text-align: left;
  color: #333;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.album {
  text-align: left;
  display: inline-block;
  width: 156px;
  height: 16px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.loading {
  margin: 20px auto;
}
.loadiing_logo {
  margin: 0 5px 0 0;
  width: 20px;
  height: 20px;
}
.Singer_area_ul {
  margin-left: -24px;
}
.Singer_area_ul > li {
  float: left;

  width: 130px;
  padding: 0 0 30px 24px;
  height: 154px;
}
.Singet_picture {
  position: relative;
  width: 130px;
  height: 130px;
}

.Singet_img {
  width: 130px;
  height: 130px;
}
.Singet_picture > span {
  position: absolute;
  display: inline-block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../images/coverall.png) no-repeat 0 -680px;
}
.nm {
  float: left;
  width: 85%;
  height: 16px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.Singer_area_ul > li > p {
  margin: 8px 0 0;
  width: 100%;
}
.SingePage {
  float: right;
  width: 17px;
  height: 18px;
  background: url(../images/icon.png) no-repeat 0 -740px;
}
.album_box {
  margin-left: -33px;
}
.album_box li {
  float: left;
  width: 153px;
  height: 178px;
  padding: 0 0 30px 33px;
}
.u-cover {
  position: relative;
  width: 130px;
  height: 130px;
}
.u-cover img {
  width: 130px;
  height: 130px;
}
.msk {
  position: absolute;
  top: 0;
  left: 0;
  width: 153px;
  height: 130px;
  background: url(../images/coverall.png) no-repeat 0 -845px;
}
.icon_play {
  position: absolute;
  bottom: 5px;
  right: 10px;
  width: 28px;
  height: 28px;
  background: url(../images/iconall.png) no-repeat 0 -140px;
  
}
.dec {
  width: 100%;
  margin: 8px 0 3px;
  font-size: 14px;
  text-align: left;
}
.f-thide {
 
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

}
.s-name {
  width: 85%;
  text-align: left;
}
.tit {
   color: #000;
}
.album_box li a:hover {
  text-decoration: underline;
  color: inherit;
}
</style>